<template>
	<view>
		<!-- <view style="position: fixed;z-index:1;"> -->
			<navbar>
				<view slot="header">
					<view @click="back" style="width: 30px;height: 45px;line-height: 45px;margin-left: 20px;">
						<u-icon name="arrow-left" size="30" color="#ffffff"></u-icon>
					</view>
				</view>
			</navbar>
		<!-- </view> -->

		<!-- <image src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/bga1.jpg" mode="widthFix" style="width: 100%;"></image> -->
		<canvas canvas-id="canvas" :style="{'width':width+'px','height':height+'px'}"></canvas>
		<view
			@click="baocun"
			class="button f14"
			style="width: 240rpx; text-align: center; line-height: 40px;position: fixed; z-index: 99;bottom: 8%; left: 50%; margin-left: -60px; "
		>
			保存相册
		</view>
	</view>
</template>

<script>
	import navbar from '@/components/navbar.vue';
	export default {
		components:{
			navbar
		},
		data() {
			return {
				width:0,
				height:0,
				my_avatar:'',
				ta_avatar:'',
				form:{},
				title:' ',
				background:'rgba(0,0,0,0)'
			}
		},
		onLoad(e) {
			// this.form=JSON.parse(e.name)
			if(e.type=='恋爱协议'){
				this.setcanvas('https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/xieyibg.png','https://yunkeososyunchuc.bc8t.cn/lianaikongjian/xieyi/lianai.png')
			}else{
				this.setcanvas('https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/xieyibg.png','https://yunkeososyunchuc.bc8t.cn/lianaikongjian/xieyi/guimi.png')
			}

			// console.log(this.vuex_user_content['my_nickname'],'gggg')
		},
		onShow() {
		},
		onReady() {
			// this.setcanvas('https://love-space.oss-cn-chengdu.aliyuncs.com/uploads/20220911/63c19e9f169ea3c34a253764b2765d70.png','https://love-space.oss-cn-chengdu.aliyuncs.com/uploads/20220911/d3ccb739472fc9456e17f6d1138847cc.png')
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			baocun(){
				this.serve()
			},
			getimginfo(src){
				return new Promise((resolve, reject) => {
				      uni.getImageInfo({
				        src: src,
				        success: (res) => {
				          resolve(res);
				        },
				        fail: (err) => {
				          reject(err);
				        }
				      });
				})
			},
			setcanvas(img,img1){
				this.my_avatar=this.vuex_user_content['my_avatar']
				this.ta_avatar=this.vuex_user_content['ta_avatar']
				uni.getSystemInfo({
				    success: (res)=> {
						this.width=res.windowWidth
						this.height=res.windowHeight
						var ctx = uni.createCanvasContext('canvas',this)

						// #ifdef MP-TOUTIAO || H5
							ctx.drawImage(img,0,0,res.windowWidth,res.windowHeight)
							ctx.drawImage(img1,(res.windowWidth-350)/2,80,350,510)
							ctx.drawImage(this.my_avatar,(res.windowWidth-50)/2+30,100,50,50)
							ctx.drawImage(this.ta_avatar,(res.windowWidth-50)/2-30,100,50,50)
							ctx.setFillStyle('rgb(254, 197, 206)')
							ctx.setFontSize(18)
							ctx.fillText(this.vuex_name['name2'],(res.windowWidth-50)/2-70, 130)
							ctx.fillText(this.vuex_name['name1'], (res.windowWidth-50)/2+100, 130)
							let date=this.date.GetDateStr(0)
							ctx.fillText(date.split('-')[0], (res.windowWidth-50)/2-50, 540)
							ctx.fillText(date.split('-')[1], (res.windowWidth-50)/2+15, 540)
							ctx.fillText(date.split('-')[2], (res.windowWidth-50)/2+55, 540)
							ctx.draw(true)
						// #endif
						// #ifdef MP-WEIXIN
							this.getimginfo(img).then((ress)=>{
								ctx.drawImage(ress.path,0,0,res.windowWidth,res.windowHeight)
								ctx.draw(true)

							}).then(()=>{
								this.getimginfo(img1).then((re)=>{
									ctx.drawImage(re.path,(res.windowWidth-350)/2,80,350,510)
									ctx.draw(true)
								}).then(()=>{
									setTimeout(()=>{
										this.getimginfo(this.my_avatar).then((re1)=>{
											// ctx.drawImage(re1.path,(res.windowWidth-350)/2,80,350,490)
											ctx.drawImage(re1.path,(res.windowWidth-50)/2+30,100,50,50)
											ctx.setFillStyle('rgb(254, 197, 206)')
											ctx.setFontSize(18)
											ctx.fillText(this.vuex_name['name2'],(res.windowWidth-50)/2-70, 130)
											ctx.fillText(this.vuex_name['name1'], (res.windowWidth-50)/2+100, 130)
											let date=this.date.GetDateStr(0)
											// ctx.fillText(date.split('-')[0], (res.windowWidth-50)/2-50, 540)
											ctx.fillText(date.split('-')[0], (res.windowWidth-50)/2-50, 540)
											ctx.fillText(date.split('-')[1], (res.windowWidth-50)/2+15, 540)
											ctx.fillText(date.split('-')[2], (res.windowWidth-50)/2+55, 540)
											ctx.draw(true)
										})
									},3000)

								}).then(()=>{
									setTimeout(()=>{
										this.getimginfo(this.ta_avatar).then((re2)=>{
											// ctx.drawImage(re1.path,(res.windowWidth-350)/2,80,350,490)
											ctx.drawImage(re2.path,(res.windowWidth-50)/2-30,100,50,50)
											// ctx.setFillStyle('rgb(254, 197, 206)')
											// ctx.setFontSize(12)
											// ctx.fillText(this.vuex_name['name1'],(res.windowWidth-50)/2-70, 130)
											// ctx.fillText(this.vuex_name['name2'], (res.windowWidth-50)/2+100, 130)
											// let date=this.date.GetDateStr(0)
											// ctx.fillText(date.split('-')[0], (res.windowWidth-50)/2-36, 524)
											// ctx.fillText(date.split('-')[1], (res.windowWidth-50)/2+15, 524)
											// ctx.fillText(date.split('-')[2], (res.windowWidth-50)/2+55, 524)
											ctx.draw(true)
										})
									},3000)

								})
							}).then(()=>{

							}).then(()=>{

							})
						// #endif

				    }
				});
			},
			serve(){
				//将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
				// setTimeout(()=> {
					uni.canvasToTempFilePath({
						canvasId: 'canvas',
						quality: 1,
						complete: (res) => {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success(res) {
									uni.showToast({
										title: '已保存到相册',
										icon: 'success',
										duration: 2000
									})
									// plus.runtime.openURL("weixin://");
									setTimeout(() => {
										that.isShow = false
									}, 2000)
								}
							})
						}
					}, this);
				// }, 500);

			}
		}
	}
</script>

<style>

</style>
